<template>
  <div class="SearchMain">
    <div class="SearchContent">
      <!-- 搜索框外层 -->
      <div id="SearchBox">
        <span>&#xe60a;</span>
        <input type="text" />
      </div>
      <span id="Cancel">
        <router-link to="/home">取消</router-link>
      </span>
    </div>
  </div>
</template>
<script></script>
<style lang="scss" scoped>
a{
  color: #000;
}
.SearchMain {
  position: fixed;
  width: 100%;
  background-color: rgb(255, 255, 255);
}
.SearchContent {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#SearchBox {
  width: 75%;
  height: 50%;
  border: 0;
  position: relative;
  color: #fff;
  border-radius: 20px;
  outline: none;
  display: flex;
  font-family: "iconfont";
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  background-color: #dadada;
  span {
    color: #474747;
    font-size: 20px;
  }
  input {
    width: 80%;
    height: 100%;
    border: 0;
    outline: none;
    font-size: 1em;
    background-color: #dadada;
  }
}
#Cancel {
  color: #000;
  margin-left: 5%;
}

.Banner {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #474747;
  color: white;
  padding: 0;
  width: 100%;
  top: 0;
  height: 60px;
  z-index: 999;

  li {
    padding: 15px 20px;
    font-size: 1.1rem;
    color: #fff;
  }
}
</style>
